<template>
    <div class="ctn">
        <div id="probg" class="pro-bg">
            <div id="probar" class="pro-bar" :style="'width:' + progress + '%'">
                
            </div>
        </div>
        <!--<img @dragstart.prevent ref='imgpoint' class="pro-point" src="../assets/icon.png" :style="'left:'+point+'px'" @mousedown="handleMouseDown"></img>-->

        <img :id='imgpoint' class="pro-point" src="../assets/音叶/mobile/试听-进度条豆.png" :style="'left:'+point+'px'" @mousedown="handleMouseDown" @touchstart="handleMouseDown"></img>

        <input class="borderless no_number" type="number" v-model="input" @input="onInput"></input>
    </div>
</template>
  
<script lang="ts" setup>

import { ref, onMounted, watch, onBeforeUnmount, inject} from 'vue'
import StateButton from './StateButton.vue'

const props = defineProps({
    min: {
        type: Number,
        default: 0
    },
    max: {
        type: Number,
        default: 100
    },
    value: {
        type: Number,
        default: 1
    }
});

let isMobile:any = false;

 
//const ws = new WebSocket('ws://www.host.com/path');

 // 监听 title 属性的变化
watch(() => props.value, (newvalue, oldvalue) => {
    
});

onMounted(()=>{
  onInput();

  isMobile = inject('isMobile');
  console.log('isMobile1111=', isMobile)
})
const emit = defineEmits<{ (e: 'change', value: number): void }>();
const update = (value: number) => {
  emit('change', value);
};

const progress = ref(0);
const input = ref(props.value);
const point = ref(0);

const imgpoint = ref(''+(Math.random()*1000));
const isDragging = ref(false);
var startx:number = 0;
 
function onInput(){
  console.log("input change,", input.value);
  let value:any = input.value;
  if(value > props.max){
    value = props.max;
  }
  if(value < 0){
    value = 0;
  }
  
  // point.value = value - 7;
  
  let div:any = document.getElementById("probg");
  const rect = div.getBoundingClientRect();
  const width = rect.width;

  var num2 = value / props.max * width;
  point.value = num2 - 12;
  progress.value = value / props.max * 100;
  input.value = value;

  update(value);
}
const handleMouseMove = (event:any) => {
  if (isDragging.value) {
    let div:any = document.getElementById("probg");
    const rect = div.getBoundingClientRect();

    var clientX:number = 0;
    if(isMobile){
      clientX = event.touches[0].clientX;
    }
    else{
      clientX = event.clientX;
    }

    const x = clientX - rect.left - startx;

    const width = rect.width;
    const num = Math.max(0, Math.min(props.max, (x / width) * props.max));
    const num2 = num / props.max * 100;
    input.value = Math.floor(num * 10) / 10;
    
    update(input.value);

    var pv = clientX - rect.left - startx;
    if(pv < 0) pv = 0;
    else if(pv > width) pv = width;
    point.value = pv - 12;
    progress.value = num2;
  }
  event.preventDefault();
  // event.stopPropagation();
  
};
 
const handleMouseUp = () => {
  isDragging.value = false;
};
 
const handleMouseDown = (event:any) => {
  isDragging.value = true;

  let div2:any = document.getElementById(imgpoint.value);
  // let div2:any = imgpoint.value;
  const rect2 = div2.getBoundingClientRect();
  var clientX:number = 0;
  if(isMobile){
    clientX = event.touches[0].clientX;
  }
  else{
    clientX = event.clientX;
  }
  startx = clientX - (rect2.left + rect2.width * 0.5);
  console.log("rect2.left=", rect2.left);
  //   handleMouseMove(event);
 
  document.addEventListener('mousemove', handleMouseMove, {passive:false});
  document.addEventListener('mouseup', handleMouseUp);

  
  // window.addEventListener("touchstart", handleStart, false);
  document.addEventListener("touchmove", handleMouseMove, {passive:false});
  document.addEventListener("touchend", handleMouseUp, false);
};
 
onMounted(() => {
  document.addEventListener('mousemove', handleMouseMove, {passive:false});
  document.addEventListener('mouseup', handleMouseUp);

  document.addEventListener("touchmove", handleMouseMove, {passive:false});
  document.addEventListener("touchend", handleMouseUp, false);
});
 
onBeforeUnmount(() => {
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
});


</script>
<style scoped>

.ctn{
  position:absolute;
  width: 100%;
  height: 100%;
}

.pro-bg{
    position:absolute;
    background-color: #737373;
    width: calc(100% - 86px - 40px);
    height: 12px;
    border-radius: 4px;
    top:13px;
    left: 0px;
    overflow: hidden;
}
.pro-bar{
    background-color: #ffffff;
    width: calc(100% - 86px - 40px);
    height: 12px;
}
.pro-point{
    position:absolute;
    width: 47px;
    height: 48px;
    top: -5px;
    cursor:pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}
.borderless{
    position: absolute;
    left: calc(100% - 90px);
    width: 86px;
    height: 32px;
    text-align: center;
    color: white;
    background-color: #434343 !important;
    border: none;
    /* 可选的样式，以去除焦点时的边框 */
    outline: none;
    font-size: 16px;
    border-radius: 7px;
    border-top: 1px solid #bbb9b9;
    border-bottom: 0.5px outset #bbb9b9;
}
</style>
  